<template>
  <view class="c_empty">
    <slot>
      <image src="https://staticcdn.youliao.com/static/image/www_m/activity/empty.png" />
    </slot>
    <view class="empty-msg-wrap">
      <view class="empty-msg" @tap="callPhone(phone)" v-if="type === 'search'">
        世界那么大搜点别的商品吧~
        <br />
        或拨打客服热线
        <text class="service-phone">{{ phone }}</text>
        为你提供采购服务
      </view>
      <view class="empty-msg" v-else>
        {{ text || "暂无数据" }}
        <br />
      </view>
    </view>
  </view>
</template>
<script>
export default {
  props: {
    type: {
      type: String,
      default: ""
    },
    text: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      phone: "4008-938-935"
    };
  },
  methods: {
    callPhone(phoneNumber) {
      uni.makePhoneCall({
        phoneNumber
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.c_empty {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 100rpx 0;
  margin: 0 20rpx;
  image {
    width: 320rpx;
    height: 184rpx;
  }
  .empty-msg {
    font-size: 24rpx;
    color: #969799;

    &-wrap {
      position: absolute;
      top: 300rpx;
      left: 0;
      right: 0;
      text-align: center;
      line-height: 46rpx;
    }
  }
  .service-phone {
    padding: 0 6rpx;
    color: #3374f6;

    &::before {
      display: inline-block;
      width: 24rpx;
      height: 24rpx;
      margin: 0 10rpx;
      content: "";
      background: url("https://staticcdn.youliao.com/static/image/www_m/common/empty-icon-service.png") center 0 no-repeat;
      background-size: 100%;
    }
  }
}
</style>
